<template>
	<view class="container">
		<view class="nav-bg" :style="{height: bgHeight + tui.navBarHeight +'px'}">
			<u-navbar :background="background" title-size="34"  back-icon-color="#343A40"  :border-bottom="false" 
			:custom-back="tui.goBack" placeholder>
			</u-navbar>
			<view class="d-flex justify-content-center align-items-center state-wrap" v-if="status == 2">
				<view class="wait-icon">
					<image src="/static/mine/finish.png"></image>
				</view>
				<view class="text-292940 fz-44">订单已完成</view>
			</view>
			<view class="d-flex justify-content-center align-items-center state-wrap" v-if="status == -1">
				<view class="wait-icon">
					<image src="/static/mine/warning.png"></image>
				</view>
				<view class="text-292940 fz-44">订单已取消</view>
			</view>
			<view class="d-flex justify-content-center align-items-center state-wrap" v-if="status == -2">
				<view class="wait-icon">
					<image src="/static/mine/warning.png"></image>
				</view>
				<view class="text-292940 fz-44">等待退款</view>
			</view>
		</view>
		<view class="order-wrap cancel-top">
			<view class="order-info" @click="toDeatail">
				<view class="d-flex position-relative">
					<view class="order-img">
						<image :src="cover" mode="aspectFill" v-if="cover !== ''"></image>
						<image :src="file" mode="aspectFill" v-else></image>
					</view>
					<view class="order-right position-relative d-flex justify-content-between align-items-center">
						<view class="order-name" v-if="no !== ''">{{name}}#{{no}}</view>
						<view class="order-name" v-else>{{name}}</view>
						<view class="order-amount">
							<view class="amount">
								<span class="fz-30">￥</span>
								<span class="fz-40 font-DIN">{{price}}</span>
							</view>
							<view class="count">
								x{{count}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="transaction-info">
				<view class="d-flex align-items-center transaction-list">
					<view class="text-#999BA8 fz-26 padding-r">
						订单编号:
					</view>
					<view class="text-292940 fz-28 font-DIN">{{order_no}}</view>
					<image src="/static/mine/copy-grey.png" @click="copy(order_no)"></image>
				</view>
				
				<view class="d-flex align-items-center transaction-list">
					<view class="text-#999BA8 fz-26 padding-r">
						交易时间:
					</view>
					<view class="text-292940 fz-28 font-DIN">{{created_at}}</view>
				</view>
				<view class="d-flex align-items-center transaction-list" v-if="status == 2">
					<view class="text-#999BA8 fz-26 padding-r">
						支付方式:
					</view>
					<view class="text-292940 fz-28 font-DIN">汇付钱包</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bgHeight:204,
				background:{ background:'rgba(255,255,255,0)' },
				scroll:0,
				scrollH: 0,
				scroll: 0,
				opcity: 0,
				order_id:'',
				created_at:'',
				name:'',
				no:'',
				file:'',
				price:'',
				token_id:'',
				status:'',
				count:1,
				cover:'',
				work_id:'',
				order_no:''
			}
		},
		mounted() {
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollH = res.windowWidth
					}
				})
			}, 50)
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.created_at = options.created_at
			this.name = options.name
			this.no = options.no || ''
			this.file = options.file
			this.price = options.price
			this.token_id = options.token_id || ''
			this.status = options.status
			this.count = options.count || 1
			this.cover = options.cover || ''
			this.work_id = options.work_id
			this.order_no = options.order_no
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
			this.scroll = scrollTop
			let opcity = this.scroll / this.scrollH * 10;
			if (opcity >= 1 && this.opcity >= 1) {
				opcity = 1
			}
			this.opcity = opcity;
			this.background.background = 'rgba(255,255,255,' + this.opcity + ')'
			if (this.opcity == 0) {
				this.background.background = 'rgba(255,255,255,0)'
			}
		},
		methods:{
			//复制
			copy(val) {
				uni.setClipboardData({
					data: val,
					success: (data)=> {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			//商品详情
			toDeatail(){
				if(this.token_id === ''){
					uni.navigateTo({
						url:`/pages/secondary/market/Blind-box?box_id=${this.work_id}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/secondary/market/index?work_id=${this.work_id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100vh;
		background: url('/static/mine/order-bg.png') no-repeat;
		background-size: 100% 40%;
	}
	.nav-bg{
		width:100%;
		.state-wrap{
			padding: 43upx 0 0 0;
			/deep/.u-countdown-colon{
				line-height: 1em;
				font-size: 23upx;
				padding-bottom: 6upx !important;
			}
		}
		.cancel-padding{
			padding-top: 23upx;
		}
		.wait-icon {
			height: 44upx;
			width: 44upx;
			margin-right: 10upx;
			image {
				width: 44upx;
				height: 44upx;
			}
		}
	
		
	}
	.order-wrap{
		padding: 0 24upx;
	}
	.finish-top{
		margin-top: -153upx;
	}
	.cancel-top{
		margin-top: -100upx;
	}
	.order-info{
		width: 100%;
		height: 240upx;
		background: #FFFFFF;
		box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
		border-radius: 10upx;
		padding: 30upx 28upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		.order-img{
			width: 180upx;
			height: 180upx;
			border-radius: 8upx;
			margin-right: 18upx;
			image{
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
			}
		}
		.order-right{
			padding-top: 11upx;
			box-sizing: border-box;
			height: 180upx;
			width: 100%;
			.order-name{
				width: 57%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;				//溢出内容隐藏
				text-overflow: ellipsis;		//文本溢出部分用省略号表示
				display: -webkit-box;			//特别显示模式
				-webkit-line-clamp: 2;			//行数
				line-clamp: 2;					
				-webkit-box-orient: vertical;	//盒子中内容竖直排列
				word-wrap:break-word;
				word-break:break-all;
			}
			.order-amount{
				width: 41%;
				text-align: right;
				.amount{
					color: #2E2E4AFF;
				}
				.count{
					font-size: 28upx;
					color: #999BA8FF;
				}
			}
			.name-460{
				width: 460upx;
			}
			.order-price{
				bottom: 50upx;
			}
		}
		
	}
	.transaction-info{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
		border-radius: 10upx;
		padding: 0 30upx;
		box-sizing: border-box;
		.transaction-list{
			width:100%;
			height: 84upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
			image{
				width: 28upx;
				height: 28upx;
				margin-left:10upx;
			}
			.padding-r{
				padding-right:35upx;
			}
		}
		.transaction-list:nth-last-of-type(1){
			border-bottom: none;
		}
	}
	.link-wrap{
		padding: 0 30upx 30upx;
		box-sizing: border-box;
	}
	.link-box{
		padding: 40upx 0 24upx 0;
	}
	.creation-box {
		flex-wrap: wrap;
		box-sizing: border-box;
	
		.creation-item {
			width: 337upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102, 105, 120, 0.2), 0px 4upx 12upx -6upx rgba(154, 166, 219, 0.1);
			border-radius: 10upx;
			margin-bottom: 16upx;
	
			.creation-cover {
				width: 337upx;
				height: 337upx;
	
				image {
					width: 337upx;
					height: 337upx;
					border-radius: 10upx 10upx 0 0;
				}
			}
	
			.creation-quantity {
				width: 248upx;
				height: 36upx;
				background: rgba(41, 41, 64, 0.4);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				padding: 6upx 0;
				box-sizing: border-box;
	
				.line {
					display: block;
					height: 20upx;
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}
	
			.creation-item-padding {
				padding: 0 10upx;
				box-sizing: border-box;
			}
	
			.creation-item-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-top: 31upx;
				padding-bottom: 14upx;
			}
	
			.creation-item-price {
				line-height: 44upx;
				margin-bottom: 20upx;
			}
		}
	}
</style>